{% extends "base.html" %}
{% load staticfiles %}

{% block title %}历史持仓查询{% endblock %}

{% block content %}
    <!--查询错误提示模态框-->
    <div class="modal fade" data-backdrop="static" id="error_msg">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="operat-success" style="color: red">
                        仅支持最长1年数据查询！
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Main content -->
    <body>
    <section class="content">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active" style="margin-top:10px"><a href="#fa-pack" onclick="tabs(1)"
                                                              data-toggle="tab">历史持仓查询</a></li>
            </ul>
            <div class="tab-content">
                <!--历史持仓查询头部-->
                <div class="tab-pane active" id="fa-hpquery">
                    <div class="div-query">
                        <div class="bs-bars pull-left"></div>
                        <div class="lbl-query"><span>环境 </span>
                            <select class="envir-input-query" id="po_pl_envid">
                                <option value="1">仿真环境</option>
                                <option value="2">实盘环境</option>
                            </select></div>
                        <div class="lbl-query"><span>日期: </span>
                            <input class="date-input-query" type="text" id="startime" placeholder=""
                                   style=" cursor: pointer">
                        </div>
                        <div class="lbl-query" style="margin-left: 5px;margin-right: 5px"><span>至</span>
                            <input class="date-input-query" type="text" id="endtime" placeholder=""
                                   style="cursor: pointer">
                        </div>
                        <div class="lbl-query"><span>策略ID </span>
                            <input type="text" id="po_ruleid" class="id-input-query">
                        </div>
                        <div class="lbl-query"><span>策略名称 </span><input class="input-query" type="text" id="po_stgname">
                        </div>
                        <div class="lbl-query"><span>代码 </span>
                            <input class="instrid-input-query" type="text" id="po_instrumentid">
                        </div>
                        <div class="lbl-query">
                            <button class="btn-query" onclick="searchPosition_()">查询
                            </button>
                        </div>
                    </div>
                    <table class="table-stc" id="HistoryTable">
                    </table>
                </div>
            </div>
        </div>
    </section>
    </body>
{% endblock %}

{% block scripts %}


    <script type="text/javascript">

        var hcolumns = [
            {
                field: 'tradingday',
                width: 100,
                title: '时间'
            }, {
                field: 'ruleid',
                width: 100,
                title: '策略ID'
            }, {
                field: 'rulename',
                width: 100,
                title: '策略名称'
            }, {
                field: 'instrumentid',
                title: '代码',
                width: 100,
            },
            {
                field: 'position',
                title: '持仓量（万）',
                width: 100,
                formatter: function (value) {
                    if (value > 0) {
                        return "+" + value.toString()
                    } else {
                        return value
                    }

                }
            },
        ];
        $(function () {
            stad = GDate(7)
            endd = GDate(1)
            $("#startime").val(stad)
            $("#endtime").val(endd)

            /**
             //更改导出按钮样式
             var export1 = '<li id="btn-export" data-type="excel" class="btn-add" style="background-color: #009AFF;">' +
             '</li>'
             $(".dropdown-menu").append(export1)
             var href = $("#btn-export").prev().children()
             $("#btn-export").append(href)
             $("#btn-export > a").text("导出")
             {#var x = $(".dropdown-menu").children().children()#}
             {#$("#btn-export").append(x)#}
             {#console.log(x)#}
             {#$(".export").children().removeClass("dropdown-menu")#}
             **/
            searchPosition_()

        })
        //时间控件
        $("#startime").datetimepicker({
            format: 'yyyy-mm-dd',
            startView: 'year',
            maxView: 'year',
            minView: 'month',
            autoclose: true,
            pickerPosition: "bottom-right",
            language: 'zh',
            bootcssVer: 3, //显示箭头
            {#startData: startDay() //获取七天前日期#}
        });
        $("#endtime").datetimepicker({
            format: 'yyyy-mm-dd',
            startView: 'year',
            maxView: 'year',
            minView: 'month',
            autoclose: true,
            pickerPosition: "bottom-right",
            language: 'zh',
            bootcssVer: 3, //显示箭头
        }).on("click", function (e) {
            $(this).parent().children().removeClass("active")
            $("#endtime").datetimepicker(
                "setStartDate", $("#startime").val()
            )
        });

        /**
         * @return {string}
         */
        function GDate(k) {
            var myDate = new Date;
            var year = myDate.getFullYear(); //获取当前年
            var mon = myDate.getMonth() + 1; //获取当前月
            var date = myDate.getDate() - k
            if (date < 0) {
                if (mon in ["1", "3", "5", "7", "8", "10", "12"]) {
                    date = 31 + parseInt(date)
                } else if (mon in ["4", "6", "9", "11"]) {
                    date = 30 + parseInt(date)
                } else {
                    if (parseInt(year) % 4 === 0 && parseInt(year) % 100 !== 0 ||
                        parseInt(year) % 400 === 0) {
                        date = 29 + parseInt(date)
                    } else {
                        date = 28 + parseInt(date)
                    }
                }
            }
            if (mon < 10) {
                mon = "0" + mon
            }
            if (date < 10) {
                date = "0" + date
            }

            return year + "-" + mon + "-" + date
        }


        //搜索 持仓
        function searchPosition_() {
            var startime = $("#startime").val();
            var endtime = $("#endtime").val();
            var po_ruleid = $("#po_ruleid").val();
            var po_stgname = $("#po_stgname").val();
            var po_instrumentid = $("#po_instrumentid").val();
            var po_pl_envid = $("#po_pl_envid").val();

            var str_arr = startime.split("-")
            var end_arr = endtime.split("-")
            var y = parseInt(end_arr[0]) - parseInt(str_arr[0])
            var m = parseInt(end_arr[1]) - parseInt(str_arr[1])
            var d = parseInt(end_arr[2]) - parseInt(str_arr[2])
            if (y >= 2 || y === 1 && m >= 1 || y === 1 && m === 0 && d >= 0) {
                $('#HistoryTable').bootstrapTable('removeAll');
                $("#error_msg").modal("show");
                setTimeout(function () {
                    $("#error_msg").modal("hide")
                }, 1000)
                return;
            }
            // 整理发送后台的数据
            var data = {
                "pl_envid": po_pl_envid,
                "ruleid": po_ruleid,
                "instrumentid": po_instrumentid,
                "stgname": po_stgname,
                "starttime": startime,
                "endtime": endtime,
            };

            var JsonData = JSON.stringify(data);
            $.post("{% url 'trade:his_query' %}", {"data": JsonData, 'hisSearchPosition_search': 1}, function (r) {
                $("#HistoryTable").bootstrapTable("destroy").bootstrapTable({
                    exportTypes: ['excel'],
                    showExport: true,
                    exportDataType: "all",
                    exportOptions: {
                        fileName: "his-position"
                    },
                    columns: hcolumns,
                    data: r,
                    height: 600,
                    //******前端分页设置****
                    pagination: true,
                    pageNumber: 1,
                    pageSize: 20,
                    pageList: [10, 20, 50, 200],
                    paginationHAlign: "right",
                    paginationDetailHAlign: "left"
                    //******前端分页设置****
                });
            });
        }

        //bstable渲染页面（固定写法）


    </script>
    <style>
        {#加载数据时的样式#}
        .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
            align-items: center;
            background: #141414;
            display: none;
            justify-content: center;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 1000;
        }
    </style>

{% endblock %}